<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LOGO 辣评大挑战</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'Comic Sans MS', cursive, sans-serif;
            background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat center center fixed;
            background-size: cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            position: relative;
            overflow: hidden;
        }

        /* 标题样式 */
        h1 {
            color: #ff69b4;
            text-shadow: 5px 5px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
            font-size: 5em;
            margin-bottom: 20px;
            animation: bounce 1s infinite alternate, colorChange 2s infinite, rotateTitle 10s infinite linear;
            transform-origin: center bottom;
        }

        @keyframes bounce {
            from {
                transform: translateY(0);
            }

            to {
                transform: translateY(-30px);
            }
        }

        @keyframes colorChange {
            0% {
                color: #ff69b4;
            }

            25% {
                color: #00ff00;
            }

            50% {
                color: #0000ff;
            }

            75% {
                color: #ffff00;
            }

            100% {
                color: #ff69b4;
            }
        }

        @keyframes rotateTitle {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* 副标题样式 */
        .subtitle {
            color: #fff;
            font-size: 2.5em;
            text-shadow: 3px 3px 0 #000;
            margin-bottom: 30px;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 15px 30px;
            border-radius: 20px;
            animation: shake 0.5s infinite alternate;
        }

        @keyframes shake {
            0% {
                transform: translateX(-5px);
            }

            100% {
                transform: translateX(5px);
            }
        }

        /* 文件输入框样式 */
        input[type="file"] {
            display: none;
        }

        .custom-file-upload {
            border: 8px dotted #fff;
            padding: 40px;
            border-radius: 50%;
            cursor: pointer;
            background-color: rgba(255, 255, 255, 0.3);
            transition: background-color 0.3s ease, transform 0.3s ease;
            margin-bottom: 20px;
            width: 250px;
            height: 250px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
            animation: pulse 1s infinite alternate;
        }

        .custom-file-upload:hover {
            background-color: rgba(255, 255, 255, 0.7);
            transform: scale(1.2);
        }

        @keyframes pulse {
            from {
                transform: scale(1);
            }

            to {
                transform: scale(1.1);
            }
        }

        /* 按钮样式 */
        button {
            padding: 25px 50px;
            background-color: #ff1493;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-size: 2em;
            box-shadow: 0 12px 0 #c71585;
            transition: all 0.1s ease;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
            animation: floatButton 3s infinite;
        }

        button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            animation: shine 1s infinite;
        }

        @keyframes shine {
            0% {
                left: -100%;
            }

            100% {
                left: 100%;
            }
        }

        @keyframes floatButton {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-15px);
            }

            100% {
                transform: translateY(0);
            }
        }

        button:active {
            transform: translateY(8px);
            box-shadow: 0 5px 0 #c71585;
        }

        /* 结果显示区域样式 */
        #result {
            margin-top: 20px;
            padding: 40px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 30px;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
            text-align: center;
            width: 90%;
            max-width: 900px;
            position: relative;
            overflow: hidden;
            animation: fadeIn 1s;
        }

        #result::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: repeating-linear-gradient(45deg, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.1) 10px, transparent 10px, transparent 20px);
            z-index: -1;
            animation: rotate 10s linear infinite;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        #result p {
            font-size: 1.8em;
            color: #333;
        }

        /* 搞怪装饰元素 */
        .fun-element {
            position: absolute;
            width: 80px;
            height: 80px;
            background-size: cover;
            animation: float 5s infinite;
        }

        .star {
            background-image: url('https://cdn.pixabay.com/photo/2016/03/31/19/25/star-1294811_1280.png');
            top: 10%;
            left: 10%;
        }

        .alien {
            background-image: url('https://cdn.pixabay.com/photo/2018/07/10/19/00/alien-3529242_1280.png');
            top: 20%;
            right: 15%;
        }

        .ufo {
            background-image: url('https://cdn.pixabay.com/photo/2013/07/12/19/44/ufo-154684_1280.png');
            bottom: 15%;
            left: 20%;
        }

        .monster {
            background-image: url('https://cdn.pixabay.com/photo/2018/07/12/16/33/monster-3533337_1280.png');
            bottom: 20%;
            right: 10%;
        }

        @keyframes float {
            0% {
                transform: translate(0, 0);
            }

            50% {
                transform: translate(30px, -30px);
            }

            100% {
                transform: translate(0, 0);
            }
        }
    </style>
</head>

<body>
    <!-- 搞怪装饰元素 -->
    <div class="fun-element star"></div>
    <div class="fun-element alien"></div>
    <div class="fun-element ufo"></div>
    <div class="fun-element monster"></div>

    <h1>LOGO 辣评大挑战</h1>
    <div class="subtitle">品牌公共策所瞎JB出品</div>
    <label for="imageUpload" class="custom-file-upload">
        上传你的 LOGO 一探究竟！
    </label>
    <input type="file" id="imageUpload" accept="image/*">
    <button onclick="processImage()">提交开喷</button>
    <div id="result"></div>

    <script>
        function processImage() {
            const fileInput = document.getElementById('imageUpload');
            const file = fileInput.files[0];

            if (!file) {
                alert('请选择一张图片进行上传。');
                return;
            }

            // 随机生成 1 - 50 分的分数
            const score = Math.floor(Math.random() * 50) + 1;

            // 毒舌吐槽文案数组
            const insults = [
                `天呐，你这所谓的 LOGO 到底是从哪个神秘的“创意黑洞”里冒出来的呀！先瞧瞧这配色，红不红、绿不绿的，就像把一堆过期的水彩颜料胡乱搅拌在一起，完全没有任何和谐可言，简直就是视觉污染的典型代表。再看看这形状，歪歪扭扭、毫无章法，仿佛是一只喝醉了酒的章鱼在键盘上随意乱按的产物。而且整体的设计元素，陈旧得就像是从上个世纪的旧仓库里翻出来的，和现代的审美趋势完全背道而驰。这样的 LOGO，就像是一颗定时炸弹，随时都可能把企业的形象炸得粉碎。它不仅不能为品牌增添光彩，反而会让消费者对品牌产生深深的质疑和反感。真不知道你是怎么忍心拿出这样的设计来丢人现眼的，难道是觉得越丑越有个性吗？拜托，这可不是个性，这是赤裸裸的低级趣味啊！`,
                `我真的怀疑你在设计这个 LOGO 的时候是不是闭着眼睛乱搞的。这配色方案，简直就是一场噩梦。各种颜色就像一群没头苍蝇一样，在画面里横冲直撞，没有一点主次之分，也没有任何的层次感。红色不鲜艳，蓝色不深邃，就像被水洗过无数次的旧衣服，黯淡无光。再看这图形，一会儿像个扭曲的毛毛虫，一会儿又像个被压扁的气球，完全让人摸不着头脑。它既没有传达出品牌的核心价值，也没有展现出任何独特的创意。整个 LOGO 就像是一个拼凑起来的怪物，各个部分之间毫无关联，仿佛是来自不同星球的元素强行组合在一起。这样的设计，别说吸引消费者了，就连自己人看了估计都得摇头叹息。你要是还把这个 LOGO 当成宝贝，那可真是无药可救了，赶紧重新找个专业的设计师吧，不然品牌迟早得被你这糟糕的设计给拖垮。`,
                `当我第一眼看到你这个 LOGO 的时候，我还以为是哪个小朋友在纸上乱涂乱画的草稿呢。这配色简直就是灾难中的灾难，各种颜色就像在打架一样，互相冲突，没有一点协调性。黄色和紫色搭配在一起，就像一个穿着花里胡哨衣服的小丑，让人看了就想发笑。再看看这线条，粗糙得就像用钝刀割出来的一样，一点都不流畅。而且整体的布局，杂乱无章，就像把一堆垃圾随意堆放在一起。这个 LOGO 完全没有体现出品牌应该有的专业性和品质感。它给人的感觉就是廉价、劣质，仿佛是从地摊上买来的山寨货。如果一个品牌用这样的 LOGO 来推广自己，那无疑是在自毁前程。消费者看到这样的 LOGO，怎么可能会对这个品牌产生信任和好感呢？你得好好反思一下，这样的设计到底能不能代表你的品牌形象，要是不能，就赶紧把它扔到垃圾桶里去吧。`
            ];

            // 随机选择一条吐槽文案
            const randomIndex = Math.floor(Math.random() * insults.length);
            const insult = insults[randomIndex];

            // 显示结果
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = `<p>您的 LOGO 得分：${score} 分</p><p>${insult}</p>`;
        }
    </script>
</body>

</html>